<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分时函数2</title>
</head>

<body>
    <div id="fractions-container"></div>
    <script>
        function insertElements(totalElements, batchSize, task) {
            let inserted = 0;

            function insertBatch(deadline) {
                while (inserted < totalElements && (deadline.timeRemaining() > 0 || deadline.didTimeout)) {
                    task(inserted);
                    inserted++;
                }

                if (inserted < totalElements) {
                    requestIdleCallback(insertBatch);
                }
            }

            requestIdleCallback(insertBatch);
        }

        const container = document.getElementById('fractions-container');
        insertElements(10000000, 100, (index) => {
            const div = document.createElement('div');
            div.textContent = `Element ${index}`;
            container.appendChild(div);
        });
    </script>
</body>

</html>